<template>
  <div class="">
    <NavBar/>
    <div class="container">
      <div class="con item">
      <span class="eva-h"></span>
      <div class="step-1" v-show="step===1">
          <div class="eva-tip">
              <b class="ftz26">风险评测</b>
              <span>尊敬的用户：为保障您的投资权益，提供更好的服务，按证监会130号令《证券期货投资者适当性管理办法》要求，购买产品或服务前，请提供真实身份信息和完成风险测评，请按以下步骤完成！</span>
              <span class="icon"></span>
          </div>
          <div class="eva-c">
              <div class="eva-c-i">
                <label class="eva-c-label">姓名</label>
                <input type="text" class="eva-input" v-model="testerInfo.name">
              </div>
              <div class="eva-c-i">
                <label class="eva-c-label">身份证号</label>
                <input type="text" class="eva-input" v-model="testerInfo.IDCard">
              </div>
              <div class="eva-c-i">
                <label class="eva-c-label">手机号</label>
                <input type="text" class="eva-input" v-model="testerInfo.mobile">
              </div>
              <button type="button" class="step-btn"
                :disabled="testerInfo.name=='' || testerInfo.IDCard==''|| testerInfo.mobile==''"
                :class="{'disabled': testerInfo.name=='' || testerInfo.IDCard==''|| testerInfo.mobile==''}"
                @click="nextStep(2)">下一步</button>
          </div>
      </div>
      <div class="step-2" v-show="step===2">
          <div class="eva-tip">
              <b class="ftz26">风险评测</b>
              <span>
                      本问卷旨在了解您可承受的风险程度等情况，借此协助您选择合适的产品或服务类别，以符合您的风险承受能力。<br/>
                      风险承受能力评估是本平台向投资者履行适当性职责的一个环节，其目的是使本平台入驻的理投师所提供的产品或服务与您的风险承受能力等级相匹配。
                      <p>本平台特别提醒您：本平台向投资者履行风险承受能力评估等适当性职责，并不能取代您自己的投资判断，也不会降低产品或服务的固有风险。同时，与产品或服务相关的投资风险、履约责任以及费用等将由您自行承担。</p>
                      <p>本平台提示您：本平台根据您提供的信息对您进行风险承受能力评估，开展适当性工作。您应当如实提供相关信息及证明材料，并对所提供的信息和证明材料的真实性、准确性、完整性负责。</p>
                      <p>本平台建议：当您的各项状况发生重大变化时，需对您所投资的产品及时进行重新审视，以确保您的投资决定与您可承受的投资风险程度等实际情况一致。</p>
                      <p>本平台在此承诺，对于您在本问卷中所提供的一切信息，本平台将严格按照法律法规要求承担保密义务。除法律法规规定的有权机关依法定程序进行查询以外，本平台保证不会将涉及您的任何信息提供、泄露给任何第三方，或者将相关信息用于违法、不当用途。</p>
              </span>
          </div>
          <div class="eva-c">
              <div class="eva-c-sel">
                  <b class="title ftz16">单选</b>
                  <div v-for="(itemPart, pindex) in questions" :key="pindex">
                    <span class="s-title">{{itemPart.typeTitle}}</span>
                    <form  class="layui-form">
                      <ul>
                        <li v-for="(item, index) in itemPart.list" :key="pindex + index">
                          <b>{{index + 1}}.{{item.title}}</b>
                          <input v-for="(answer, aindex) in item.answers" type="radio"
                            :key="aindex"
                            :name="item.no"
                            :value="answerFormat(answer, aindex)"
                            :title="answerFormat(answer, aindex)" lay-filter="test">
                        </li>
                      </ul>
                    </form>
                  </div>
              </div>
              <button type="button" class="step-btn" @click="nextStep(3)">提交</button>
          </div>
      </div>
      <div class="step-3" v-show="step==3">
          <div class="eva-tip">
              <b class="ftz26">风险评测</b>
          </div>
          <div class="eva-c">
              <b class="title ftz28">投资者风险承受能力评估结果告知函</b>
              尊敬的<b>{{testerInfo.name}}</b>：
              <p>经评测,您的风险承受能力为：<b>{{testerInfo.grade}}</b></p>
              <p>本平台在此郑重提醒，本平台作为三方平台，入驻平台的理投顾问或理投达人、理投机构向您销售的产品或提供的服务将以您的风险承受能力等为基础，
              若您提供的信息发生任何重大变化，您都应当及时书面通知本平台。本平台建议您审慎评判自身风险承受能力、结合自身投资行为，认真填写您的相关信息，作出审慎的投资判断。</p>
              <button type="button" class="step-btn" @click="nextStep(2)">重新评测</button>
          </div>
      </div>
    </div>
    </div>

     <Footer/>
  </div>
</template>

<script>
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import { evaluatingQuestions } from '@/utils/evaluating-questions'
import { saveUserRiskInfo, getUserRiskInfo } from '@/service/api'
import { mapState, mapActions } from 'vuex'
export default {
  components: {
    NavBar,
    Footer
  },
  data () {
    return {
      step: 1,
      testerInfo: {
        name: '',
        IDCard: '',
        mobile: '',
        grade: ''
      },
      questions: evaluatingQuestions,
      myAnswersArr: []
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.me || {}
    })
  },
  mounted () {
    this.$nextTick(() => {
      this.showLoadingModal()
      this.initData()
      this.initRadinFn()
      this.initMyAnswersArr()
    })
  },
  methods: {
    ...mapActions([
      'updateUserInfo'
    ]),
    showLoadingModal () {
      if (window.layer) {
        this.layerLoad = window.layer.load(0, {
          shade: false
        })
      }
    },
    closeLoadingModal () {
      if (window.layer) {
        window.layer.close(this.layerLoad)
      }
    },
    // 判断用户是否经过风险评测，如果已经经过，直接展示信息
    async initData () {
      let riskTest = await getUserRiskInfo()
      if (riskTest.data.data) {
        this.testerInfo.grade = riskTest.data.data.grade
        this.testerInfo.name = riskTest.data.data.name
        this.testerInfo.mobile = riskTest.data.data.phone
        this.testerInfo.IDCard = riskTest.data.data.idCode
        this.step = 3
      } else {
        this.step = 1
      }
      this.closeLoadingModal()
    },
    answerFormat (val, index) {
      return ['A', 'B', 'C', 'D', 'E'][index] + '.' + val
    },
    nextStep (step) {
      if (step === 2) {
        let mobileReg = /^1[3,5,6,7,8,9]\d{9}$/
        if (!mobileReg.test(this.testerInfo.mobile)) {
          window.layui.layer.msg('请输入正确的手机号码')
          return
        }
        let IDCardReg = /(^\d{15}$) | (^\d{18}$)|(^\d{17}(\d|x|X)$)/
        if (!IDCardReg.test(this.testerInfo.IDCard)) {
          window.layui.layer.msg('请输入正确的身份证号码')
          return
        }
      }
      // 提交
      if (step === 3) {
        this.submitAnswer()
        return
      }
      this.step = step
    },
    // 初始化问题数组
    initRadinFn () {
      window.layui.use('form', () => {
        this.form = window.layui.form
        this.form.on('radio(test)', (data) => {
          let index = Number(data.elem.name) - 1
          let answerLetter = data.value.substr(0, 1)
          this.myAnswersArr[index] = ['A', 'B', 'C', 'D', 'E'].indexOf(answerLetter) + 1
        })
      })
    },
    initMyAnswersArr () {
      this.myAnswersArr = []
      for (let i = 0; i < this.questions.length; i++) {
        for (let j = 0; j < this.questions[i].list.length; j++) {
          this.myAnswersArr.push('')
        }
      }
    },
    // 提交答案
    async submitAnswer () {
      let flag = true
      for (let i = 0; i < this.myAnswersArr.length; i++) {
        if (this.myAnswersArr[i] === '') {
          window.layui.layer.msg('部分题目尚未完成')
          flag = false
          break
        }
      }
      if (!flag) {
        return
      }
      let param = {answers: this.myAnswersArr.join(',')}
      // 已经评测过，更新评测
      if (this.userInfo.riskTest) {
        param.userId = this.userInfo.sysUser.userId
      } else {
        param.name = this.testerInfo.name
        param.phone = this.testerInfo.mobile
        param.idCode = this.testerInfo.IDCard
      }
      let res = await saveUserRiskInfo(param)
      if (res.data) {
        this.testerInfo.grade = res.data.data.grade
        this.step = 3
        // 更新vuex 信息
        this.userInfo.riskTest = true
        this.updateUserInfo(this.userInfo)
      }
    }
  }
}
</script>

<style scoped lang="scss">
$icon:'../../assets/res/img/icon_re.png';
.con{
  width: 1000px;
  margin: 40px auto;
}
.eva-h{
  display: block;
  height: 24px;
  width: 100%;
  background-image: url($icon);
  background-repeat: no-repeat;
  background-position: 10px -593px;
}
.step-1{
  padding: 0 30px;
}
.eva-tip{
  padding: 24px 0;
  border-bottom: 1px solid #e6e6e6;
  position: relative;
}
.eva-tip b{
  color: #fc8a3e;
}
.step-1 .eva-tip span{
  display: block;
  width: 716px;
  line-height: 24px;
  margin-top: 14px;
}
.step-1 .eva-tip .icon{
  position: absolute;
  width: 180px;
  height: 70px;
  right: 0;
  top: 26px;
  background-image: url($icon);
  background-repeat: no-repeat;
  background-position: -999px -388px;
}
.step-1 .eva-c{
  height: 310px;
  text-align: center;
  padding-top: 40px;
}
.step-1 .eva-c-label{
  text-align: right;
  display: inline-block;
  line-height: 40px;
  width: 80px;
  margin-right: 16px;
}
.step-1 .eva-input{
  width: 214px;
  height: 40px;
  background-color: #ffffff;
  border-radius: 5px;
  border: solid 1px #e5e5e5;
  padding: 0 10px;
}
.step-1 .eva-c-i{
  margin-bottom: 24px;
}
.step-1 .step-btn{
  width: 160px;
  height: 40px;
  background-color: #f23e3e;
  border-radius: 20px;
  color: #fff;
  margin-left: 84px;
  &.disabled {
    background-color: #e6e6e6;
  }
}
.step-2{
  padding: 0 30px;
}
.step-2 .eva-tip span{
  color: #808080;
  line-height: 24px;
  display: block;
  margin-top: 14px;
}
.step-2 .eva-tip p{
  text-indent: 14px;
}
.step-2 .eva-c{
  // height: 890px;
  padding-bottom: 30px;
}
.step-2 .eva-c .eva-c-sel{
  margin-top: 15px;
  padding-right: 30px;
}
.step-2 .eva-c .eva-c-sel::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}
.step-2 .eva-c .eva-c-sel::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #eeeeee;
}
.step-2 .eva-c .title{
  padding-left: 16px;
}
.step-2 .eva-c .s-title{
  padding-left: 16px;
  margin-top: 16px;
  display: block;
}
.step-2 .eva-c li{
  padding:14px 16px;
  border-bottom: 1px dashed #e6e6e6;
}
.step-2 .eva-c input[type='radio']{
  display: block;
  -ms-progress-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.step-2 .layui-form-radio>i:hover,.step-2 .layui-form-radioed>i{
  color: #f23e3e;
}
.step-2 .layui-form-radio>i{
  font-size: 12px;
}
.step-2 .step-btn{
  width: 160px;
  height: 40px;
  background-color: #f23e3e;
  border-radius: 20px;
  display: block;
  color: #fff;
  margin: 40px auto;
}
.step-3{
  padding: 0 30px;
}
.step-3 .eva-c{
  height: 450px;
  padding: 0 26px;
}
.step-3 .eva-c .title{
  display: block;
  text-align: center;
  margin: 40px 0 60px 0;
}
.step-3 .eva-c p{
  text-indent: 28px;
  line-height: 24px;
  margin-top: 10px;
}
.step-3 .step-btn{
  width: 160px;
  height: 40px;
  background-color: #f23e3e;
  border-radius: 20px;
  color: #fff;
  display: block;
  margin: 70px auto 0 auto;
}
</style>
